17 - Sort Without Articles

tags: JavaScript30

專案簡介

第十七天的目標是利用正則表達式做進階的排序

課程影片：JS30 17
導讀影片：Alex

初始文件

Github 檔案位置： 17 - Sort Without Articles

網頁一開始的樣子如下

可以先去看看 最後的成品

正式製作

今天要做的事情比較簡單

一開始我們會拿到一份 Data，今天要做的事情是把這些文字去掉 the a an 之後，排序並輸出於頁面上

const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

首先是排序的部分，在這裡會用到之前學的 sort 函式，後面就直接把排序完的 Data 放進 <li> 元素中輸出至畫面上了

const sortedBands = bands.sort((a, b) => a > b ? 1 : -1);

document.querySelector('#bands').innerHTML =
  sortedBands
    .map(band => `<li>${band}</li>`)
    .join('');

從這裡可以發現，直接排序的話 a、an 都會被排在前面，因此我們可以利用正則表達式和 replace() 做搭配，去除掉 a、an、the

備註：由於這三個詞被我們取代成空了，因此前後會多出一些空白，可以用 trim() 消除

function strip(bandName) {
    // i 為忽略大小寫
  return bandName.replace(/^(a |the |an )/i, '').trim();
}

const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);

document.querySelector('#bands').innerHTML =
  sortedBands
    .map(band => `<li>${band}</li>`)
    .join('');

大功告成

最後程式碼

const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

function strip(bandName) {
    // i 為忽略大小寫
  return bandName.replace(/^(a |the |an )/i, '').trim();
}

const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);

document.querySelector('#bands').innerHTML =
  sortedBands
    .map(band => `<li>${band}</li>`)
    .join('');

console.log(sortedBands);

完成結果圖

最後的成品

結語

以上是第十七天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JavaScript Practice: Sorting Band Names without articles - #JavaScript30 17/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 17：Sort Without Articles Shadow
MDN Web Docs